<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">统计</el-breadcrumb-item>
      <el-breadcrumb-item>商品统计</el-breadcrumb-item>
    </el-breadcrumb>

    <el-container>
        <el-header>
          <div style="margin-top: 15px;">
            <span style="text-align: left;float: left">商品类目销售分析</span>
              <el-form ref="form" :model="form" label-width="80px">
                <el-row style="text-align: right" v-model="form.date">
                    <el-button size="small">总数据</el-button>
                    <!-- <el-button-group v-model="form.date1">
                      <el-button size="small"  @click="date(1)" >昨天</el-button>
                      <el-button size="small"  @click="date(7)">最近7天</el-button>
                      <el-button size="small"  @click="date(30)">最近30天</el-button>
                    </el-button-group>
                    <el-date-picker
                        size="small"
                        v-model="form.time"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        @change="data()" value-format="yyyy-MM-dd">
                    </el-date-picker> -->
                </el-row>
              </el-form>
          </div>
        </el-header>
      <el-main>
          <!-- 饼状图形 -->
          <div id="main" style="width: 400px;height:400px;margin-left: 105px;float: left"></div>
          <div id="main1" style="width: 400px;height:400px;margin-right: 135px;float: right"></div>
          <!-- 显示表格 -->
          <el-table
            :data="tableData"
            style="width: 90%;margin-left: 50px;text-align:center">
            <el-table-column
              prop="NAME"
              label="分类名称"
              width="200">
            </el-table-column>
            <el-table-column
              prop="num"
              label="销售数量"
              width="200">
            </el-table-column>
            <el-table-column
              label="数量比例"
              width="200">
              <template slot-scope="scope">
                {{(scope.row.num / totalNum * 100).toFixed(0)}}%
              </template>
            </el-table-column>
            <el-table-column
              prop="money"
              label="销售金额"
              width="200">
            </el-table-column>
            <el-table-column
              label="金额比例"
              width="200">
              <template slot-scope="scope">
                {{(scope.row.money / moneyNum * 100).toFixed(0)}}%
              </template>
            </el-table-column>
          </el-table>
      </el-main>
    </el-container>
  </div>
</template>
<script>
export default {
  data () {
    return {
      // 根据参数查询
      form: {},
      // 表格显示
      tableData:[],
      // 第几页
      page: 1,
      // 页大小
      pagesize: 0,
      pagesizes: [5,10,20,50],
      // 总页数
      total: 0,
      // 表格参数
      list: [],
      // 显示
      market: [],
      moneysum: [],
      totalNum: 0,
      moneyNum: 0,
      name: []
    }
  },
  methods: {
    async goodsStatistcs () {
        // this.form.date1=new Date(Date.now() - 24*60*60*1000)
        // this.form.date2=new Date(Date.now())
        const { data: res } = await this.$http.post("/orders/statistics/goodsfind",this.form);
        console.log(res.data)
        for(let i=0;i<res.data.length;i++){
            this.list.push(res.data[i])
        }
        console.log(this.list)
        this.tableData=res.data
        for(let i=0;i<this.list.length;i++){
            // 销售数量总数
            this.totalNum+=this.list[i].num
            // 销售金额总数
            this.moneyNum+=this.list[i].money
            // this.name.push(this.list[i].NAME)
            // 添加销售图的动态数据
            this.market.push({value: this.list[i].num,'name': this.list[i].NAME})
            // 添加金额图的动态数据
            this.moneysum.push({value: this.list[i].money,'name': this.list[i].NAME})
        }

        const myChart = this.$echarts.init(document.getElementById("main"));
         const option = {
            title: {
                text: '商品数量占比',
                subtext: '青橙',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: this.name
            },
            series: [
                {
                    name: '销售',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: this.market,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChart.setOption(option)
        const myChart1 = this.$echarts.init(document.getElementById("main1"))
         const option1 = {
              title: {
                  text: '商品金额占比',
                  subtext: '青橙',
                  left: 'center'
              },
              tooltip: {
                  trigger: 'item',
                  formatter: '{a} <br/>{b} : {c} ({d}%)'
              },
              legend: {
                  orient: 'vertical',
                  left: 'left',
                  data: this.name
              },
              series: [
                  {
                      name: '金额',
                      type: 'pie',
                      radius: '55%',
                      center: ['50%', '60%'],
                      data: this.moneysum,
                      emphasis: {
                          itemStyle: {
                              shadowBlur: 10,
                              shadowOffsetX: 0,
                              shadowColor: 'rgba(0, 0, 0, 0.5)'
                          }
                      }
                  }
              ]
          };
        myChart1.setOption(option1)
    },
    data (val) {

    },
    // 页大小
    handleSizeChange (val) {
      console.log(val)
    },
    // 第几页
    handleCurrentChange (val) {

    }
  },
  created () {
    this.goodsStatistcs()
  }
}
</script>

<style>
.el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
  }
  .el-main {
    background-color: #E9EEF3;
    color: #333;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>